<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" title="添加员工">
    <el-form :model="person" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="姓名" prop="company_personnel_name">
        <el-input v-model="person.company_personnel_name"/>
      </el-form-item>
      <el-form-item label="所属公司" prop="company_id">
        <CompanySelector v-model="person.company_id"/>
      </el-form-item>
      <el-form-item label="所属部门" prop="company_personnel_position">
        <DepartmentSelector v-model="person.company_personnel_position"
                            v-model:company-id="person.company_id"
                            @onChange="departmentName => person.department_name = departmentName"/>
      </el-form-item>
      <el-form-item label="手机号" prop="company_personnel_phone">
        <el-input v-model="person.company_personnel_phone"/>
      </el-form-item>
      <el-form-item label="身份证" prop="company_personnel_sfz">
        <el-input v-model="person.company_personnel_sfz"/>
      </el-form-item>
      <el-form-item label="入职时间" prop="time">
        <el-date-picker v-model="person.time" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"/>
      </el-form-item>
      <el-form-item label="合同到期时间" prop="dq_time">
        <el-date-picker v-model="person.dq_time" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"/>
      </el-form-item>
      <template class="flex">
        <el-form-item label="身份证正面图片" prop="company_personnel_sfz_img_z">
          <image-uploader alt="身份证正面图片" for-staff
                          v-model="person.company_personnel_sfz_img_z"
                          v-model:company-id="person.company_id"
                          v-model:department-name="person.department_name"/>
        </el-form-item>
        <el-form-item label="身份证反面图片" prop="company_personnel_sfz_img_f">
          <image-uploader alt="身份证反面图片" for-staff
                          v-model="person.company_personnel_sfz_img_f"
                          v-model:company-id="person.company_id"
                          v-model:department-name="person.department_name"/>
        </el-form-item>
      </template>

      <el-form-item label="毕业证图片" prop="company_personnel_byz">
        <image-uploader alt="毕业证图片" for-staff
                        v-model="person.company_personnel_byz"
                        v-model:company-id="person.company_id"
                        v-model:department-name="person.department_name"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm" type="primary" v-loading="isLoading" class="ml-auto">添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import CompanySelector from "../../../components/CompanySelector.vue";
import {useMutation} from "@pinia/colada";
import type {PersonVO} from "../../../types";
import {insertPersonnel} from "../../../api/personal.ts";
import {ElMessage, type FormInstance, type FormRules} from "element-plus";
import {reactive, ref, useTemplateRef} from "vue";
import DepartmentSelector from "../../../components/DepartmentSelector.vue";
import ImageUploader from "../../../components/ImageUploader.vue";

const visible = defineModel({default: false});

const person = ref<PersonVO>({})

const formEl = useTemplateRef<FormInstance>('formRef');

const rules = reactive<FormRules<PersonVO>>({
  company_id: [
    {required: true, message: "请选择员工所属公司"}
  ],
  company_personnel_name: [
    {required: true, message: "请输入员工姓名"}
  ],
  company_personnel_phone: [
    {required: true, message: "请输入员工手机号"},
    {pattern: /^(?:(?:\+|00)86)?1\d{10}$/, message: "请输入正确的手机号"}
  ],
  company_personnel_sfz: [{
    required: true, message: "请输入员工身份证号"
  }, {
    pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
    message: "请输入正确的身份证号"
  }],
  company_personnel_position: [
    {required: true, message: "请输入员工职位"}
  ],
  time: [
    {required: true, message: "请选择员工入职时间"}
  ]
})

const emits = defineEmits<{
  success: []
}>();

const submitForm = async () => {
  await formEl.value?.validate((valid) => {
    if (valid) {
      insertPersonFn(person.value)
    }
  })
}

let {mutate: insertPersonFn, isLoading} = useMutation({
  mutation: (person: PersonVO) => insertPersonnel(person),
  onSuccess: () => {
    emits('success')
    visible.value = false
    formEl.value?.resetFields()
    ElMessage.success("添加成功")
  },
  onError: () => {
    ElMessage.error("添加失败")
  }
});
</script>

<style scoped>

</style>